<template>
  <div class="mineinfo-container container">
    <div class="purse-container">
      <div class="title">
        <span>订单信息</span>
      </div>
      <div class="item-container">
        <div class="item-img">
          <div class="imgbox">
            <el-image
              style="width: 150px; height: 150px"
              :src="item.url"
              :fit="'cover'"
            ></el-image>
          </div>
        </div>
        <div class="item-info text-left">
          <div class="item item-name flex">
            <span class="name">商品名称：{{ item.name }}</span>
            <p class="numbreing bg-blue-100 ml-4 px-1 text-xs">
              {{ item.numbering }}/{{ item.nowNum }}
            </p>
          </div>
          <div class="item item-author flex">
            <span>作家：</span>
            <p>{{ item.author }}</p>
          </div>
          <div class="item item-seller flex">
            <span>持有人：</span>
            <p>{{ item.ownerName }}</p>
          </div>
          <div class="has rounded-sm rounded-lg">
            <div class="flex my-4">
              <p class="text-gray-500">合约地址：</p>
              <p class="text-font-color">{{ item.hasaddress }}</p>
            </div>
            <div class="flex my-4">
              <p class="text-gray-500">合约编号：</p>
              <p class="text-font-color">{{ item.hasid }}</p>
            </div>
          </div>
        </div>
        <div class="item-balance text-red-500">￥{{ item.price }}</div>
      </div>
      <div class="payment">
        <span>支付方式</span>
        <div class="payment-container">
          <ul class="my-4">
            <li class="active">
              <p>{{ purse.payer }}</p>
            </li>
          </ul>
        </div>
        <div class="payinfo text-right">
          <div class="paybalance text-left">
            <p class="text-red-500 text-right text-sm pr-8 my-4">
              总金额：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥ {{ item.price }}
            </p>
          </div>
          <div class="button-box flex">
            <button class="text-gray-500" @click="openCancel">返回详情</button>
            <button
              class="bg-font-color text-white px-8 py-2 rounded-2xl"
              @click="takeoutdialogVisible = true"
            >
              立即支付
            </button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="支付"
      :visible.sync="takeoutdialogVisible"
      width="50%"
      :before-close="takeouthandleClose"
    >
      <el-form
        ref="takeoutForm"
        :rules="rules"
        :model="takeoutform"
        label-width="0px"
      >
        <el-form-item label="" prop="payPassword">
          <span>支付密码</span>
          <el-input v-model="takeoutform.payPassword" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="takeoutdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="takeoutPurse()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    var sellPasswordCheck = (rule, value, callback) => {
        if (value === "") {
          console.log("密码为空");
          callback(new Error("密码不能为空"));
        } else {
          this.$taxios
            .postInfo("/checkoutTPassword", { pwd: value })
            .then((res) => {
              console.log(res);
              if (res.state == 1) {
                callback();
              }
              callback("交易密码错误");
            });
        }
    };
    return {
      imgList: [{ url: "" }],
      purse: {
        payId: null,
        balance: null,
        payName: null,
        payer: null,
        purseOwner: null,
      },
      item: {
        name: "ZERTO",
        url: "https://imgbed.link/file/15729",
        numBerIng: 1,
        num: 888,
        author: "ZEROT",
        nowNum: 888,
        price: 888,
        group: null,
        owner: null,
        ownerName: "ZERTO",
        srcList: ["https://imgbed.link/file/15729"],
        itemState: "",
      },
      order: {
        orderId: null,
        orderSeller: null,
        orderBuyer: null,
        orderPayer: null,
        orderPayment: null,
        orderMoney: null,
        orderItem: null,
        orderNumbering: null,
        orderTime: null,
        orderState: null,
      },
      takeoutform: {
        takeBalance: null,
        payPassword: "",
      },
      takeoutdialogVisible: false,
      rules: {
        payPassword: [
          { validator: sellPasswordCheck, required: true, trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  methods: {
    getOrder(value) {
      this.order = value;
      this.getItem();
    },
    getItem(value) {
      this.$axios
        .postInfo("/item", {
          group: this.order.orderItem,
          numbering: this.order.orderNumbering,
          itemState: 1,
        })
        .then((res) => {
          console.log(res);
          let getItem = res.item;
          this.item = Object.assign(this.item, getItem);
          this.item.itemState = getItem.itemstate == 0 ? false : true;
          console.log(this.item);
          if (this.item.owner != this.order.orderSeller) {
            this.$router.push("/home");
            console.log("信息发生变化");
            this.open4();
          }
        });
    },
    getPurse() {
      this.$taxios.postInfo("/getPurse").then((res) => {
        let state = res.state;
        if (state == 1) {
          this.purse = res.purse;
        }
      });
    },

    // 表单验证
    takeoutPurse(value) {
      console.log(this.$refs["takeoutForm"].validate);
      this.$refs["takeoutForm"].validate((valid) => {
        if (valid) {
          let balance = this.purse.balance - this.item.price;
          if (this.purse.balance - this.item.price < 0) {
            this.takeoutdialogVisible = false;
            this.openError();
          } else {
            this.trade(balance);
            this.takeoutdialogVisible = false;
            this.openSucceed();
          }
        } else {
          console.log(valid);
          console.log("error.submit!!");
          return false;
        }
      });
    },
    //支付确认
    takeouthandleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$refs["takeoutForm"].resetFields();
          done();
        })
        .catch((_) => {});
    },
    //交易
    trade(value) {
      console.log(this.item.price);
      this.getPurse();
      console.log(this.purse.balance);
      console.log("买家" + this.purse.purseOwner);
      console.log("卖家" + this.item.owner);
      this.$taxios
        .postInfo("/trade", {
          buyerOwner: this.purse.purseOwner,
          sellerOwner: this.item.owner,
          price: this.item.price,
        })
        .then((res) => {
          console.log(res);
          setTimeout(() => {
            this.$router.push("/mine/buy");
          }, 1000);
        });
    },
    //取消订单
    openCancel() {
      this.$confirm("是否取消订单？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确认取消",
        cancelButtonText: "放弃取消",
        beforeClose: (action, instance, done) => {
          if (action == "confirm") {
            this.order.orderPayment = this.purse.payer;
            this.order.orderState = 1;
            console.log(this.order);
            this.$axios.postInfo("/createOrder", this.order).then((res) => {
              console.log(res);
            });
            done();
            setTimeout(() => {
              this.$router.push("/mine/buy");
            }, 1000);
          } else if (action == "cancel") {
            console.log(action);
            done();
          }
        },
      })
        .then(() => {
          this.$message.promptBox("确认取消");
        })
        .catch((action) => {
          this.$message.promptBox("放弃取消订单");
        });
    },
    openSucceed() {
      this.$message.promptBox("购买成功，即将跳转订单页面", "success");
      console.log(this.order);
      this.order.orderPayment = this.purse.payer;
      this.order.orderState = 0;
      this.$axios.postInfo("/createOrder", this.order).then((res) => {
        console.log(res);
      });
      setTimeout(() => {
        this.$router.push("/mine/buy");
      }, 1000);
    },
    openError() {
      this.$message.promptBox("余额不足", "warning");
    },
    open4() {
      this.$message.promptBox("信息发生变化", "error");
    },
  },
  mounted() {},
  created() {
    this.getPurse();
    this.getOrder(this.$route.query);
  },
};
</script>
<style  lang="less" scoped>
.mineinfo-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  padding-top: 100px;
  margin-bottom: 2rem;

  .purse-container {
    position: relative;
    width: 90%;
    left: 5%;
    padding: 2rem;
    background: #fff;
    box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 200px;

    .title {
      position: relative;
      width: 100%;
      height: 50px;
      line-height: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // border-bottom: 1px solid rgba(128, 128, 128, 0.503);

      .el-icon-view {
        cursor: pointer;
      }
    }

    .item-container {
      position: relative;
      width: 100%;
      margin: 15px 0;
      padding-bottom: 25px;
      background: #fff;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      .item-img {
        text-align: left;
        // padding: 10px 0px 10px 10px;
        box-sizing: border-box;

        .imgbox {
          background: #e3e3e38e;
          border: 0.3rem solid #fff;
          border-radius: 4px;
          padding: 0.2rem;
          line-height: 0%;
          box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);
          margin-right: 30px;
        }
      }

      .item-info {
        flex: 1;
        margin-left: 30px;

        .item {
          margin: 1rem 0;

          span {
            @apply text-gray-400;
          }
        }

        .item-name {
          .numbreing {
            display: flex;
            align-items: center;
          }
        }
      }

      .item-balance {
        flex: 1;
        margin: 1rem 0;
      }
    }

    .payment {
      position: relative;
      width: 100%;
      line-height: 100%;
      text-align: left;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-direction: column;

      .payment-container {
        padding: 0 1rem;

        ul {
          li {
            @apply bg-gray-300;
            @apply rounded-md;
            padding: 0.5rem 1rem;
            cursor: pointer;
          }

          li.active {
            position: relative;
            border: 1px solid #2469e5;
            overflow: hidden;
            background: #fff;
          }

          li.active::after {
            content: "";
            position: absolute;
            bottom: 0%;
            right: -4px;
            width: 10px;
            height: 10px;
            background: #2469e5;
            transform: skewX(-45deg);
          }
        }
      }

      .payinfo {
        position: relative;
        width: 100%;

        .button-box {
          width: 100%;
          justify-content: flex-end;

          button {
            margin: 0 1rem;
          }
        }
      }
    }
  }

  .el-dialog__wrapper {
    /deep/ .el-dialog {
      width: 400px;
      max-width: 500px;

      .el-form-item {
        text-align: left;

        span {
          // text-align: left;
        }
      }

      .el-input__icon {
        width: auto;
      }

      .el-dialog__footer {
      }
    }
  }

  .dialog-footer {
    .el-button {
      color: black;
    }

    .el-button:hover {
      background: #409eff;
    }
  }
}
</style>